import { Component } from 'react'
import ReactDOM from 'react-dom'
import Home from './pages/Home'
import My from './pages/My'
import Friend from './pages/Friend'
import './pages/index.css'
import NotFount from './pages/NotFound'
import {
  BrowserRouter as Router,
  Route, Link,
  NavLink, Switch, Redirect
} from 'react-router-dom'
class App extends Component {
  state = {
    currentHash: ''
  }
  render() {
    return (
      <Router>
        <div>
          <h1>App</h1>
          <ul>
            <li>
              {/* <Link to="/home">首页</Link> */}
              {/* exact 精准匹配 */}
              <NavLink to="/home">首页</NavLink>
            </li>
            <li>
              {/* <Link to="/my">我的音乐</Link> */}
              <NavLink to="/my">我的音乐</NavLink>
            </li>
            <li>
              {/* <Link to="/friend">我的朋友</Link> */}
              <NavLink to="/friend">我的朋友</NavLink>
            </li>
          </ul>
          {/* 
          Router注意事项
          1.如果path指定为/ 所有以/开头的都可以可以匹配
          2.Route添加exact属性，代表精准匹配
          3.如果path不写，能够匹配所有组件
          Switch:如果将来多个路由规则能够匹配到，只会让第一个渲染出来
          配合404提示页面
        */}
          <Switch>
            {/* <Route exact path="/" component={Home}></Route> */}
            <Redirect exact from="/" to="/home"></Redirect>
            <Route path="/home" component={Home}></Route>
            <Route path="/my" component={My}></Route>
            <Route path="/friend" component={Friend}></Route>
            {/* <Route path="/friend" component={Friend}></Route> */}
            <Route component={NotFount}></Route>
          </Switch>
        </div>
      </Router>
    )
  }
}
ReactDOM.render(<App></App>, document.getElementById('root'))